<template>
	<view class="phoneForm">
		<uni-forms :modelValue="phoneInfo" ref="phoneform" validate-trigger="bind">
			<uni-forms-item label="手机号" name='phone'>
					<uni-easyinput v-model="phoneInfo.phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="验证码">
					<view style="display: flex;">
						<uni-easyinput v-model="phoneInfo.code" placeholder="请输入验证码" />
						<button class="codeBtn" :disabled="btnVisible" @click="getLoginCode">获取验证码</button>
					</view>
			</uni-forms-item>
		</uni-forms>
		<view class="confirmBtn" @click="updatePhone">
			确认修改
		</view>
	</view>
</template>

<script>
	import {updatePhone,getCode} from '@/api/user.js'
	export default {
		onShow(){
			let pages=getCurrentPages()
			this.type=pages[pages.length-1].options.type
			if(this.type==='login'){
				console.log('登录')
			}else{
				console.log('修改手机号')
			}
		},
		onReady(){
			this.$refs.phoneform.setRules(this.rules);
		},
		data() {
			return {
				type:'',
				btnVisible:false,
				phoneInfo:{
					phone:'',
					code:'',
				},
				rules:{
					phone: {
					     rules: [{
					         required: true,
					         errorMessage: '请输入电话号码'
					     }, {
					         validateFunction: (rule, value, data, callback) => {
								 let phone = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
					         // 异步需要返回 Promise 对象
					             return new Promise((resolve, reject) => {
					                 setTimeout(() => {
					                     if (!phone.test(value) && value !== '') {
					                         reject(new Error('请输入正确电话号码格式'))
					                     } else {
					                         resolve()
					                     }
					                 }, 100)
					             })
					         }
					     }]
					},
				}
			};
		},
		methods:{
			getLoginCode(){
				this.$refs.phoneform.validate().then(res=>{
					console.log('kkkkkk')
					getCode(this.phoneInfo.phone).then(res=>{
						console.log('获取验证码成功')
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			updatePhone() {
				updatePhone(this.phoneInfo).then(res => {
					uni.setStorageSync('userInfo', res?.data?.data);
					uni.setStorageSync('token',res?.data?.data?.token);
					this.goUserInfo();
				}).catch(err => {
					console.error('更新电话号码错误：', err);
				});
			},
			goUserInfo(){
				// let pages = getCurrentPages() 
				// let prevPage = pages[pages.length-2];
				// console.log(prevPage);
				// prevPage.$vm.getValue(this.phoneInfo.phone)
				uni.navigateBack({
				    delta: 1 // 返回的页面数
				})
			}
		}
	}
</script>

<style lang="scss">
.phoneForm{
	margin: 30rpx 0;
	.codeBtn{
		width: 40%;
		float: right;
		margin: 0 20rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		color: #7f7f7f;
		font-size: 30rpx;
		background-color: #f5f5f5;
		border-radius: 30rpx;
	}
}
.confirmBtn{
	width: 92%;
	margin: 30rpx auto;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	font-size: 32rpx;
	border-radius: 20rpx;
	background-color: #8DC7DF;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}
// ----------------------------
.uni-forms-item__label{
	color: #333 !important;
	font-size: 36rpx!important;
	padding-left: 30rpx!important;
}
.is-input-border{
	border: none!important;
	border-bottom: 1rpx solid #f5f5f5!important;
}
.uni-forms-item{
	margin-bottom: 30rpx!important;
}
</style>
